<template>
    <div class="with-bar my-center" :class="{'page-loading':page.loading || initLoading}">
        <ui-loading v-if="initLoading" class="page-init-loading">
            <div slot="content"></div>
        </ui-loading>
        <ui-loading v-if="page.loading" />
        <template v-else>
            <div class="user-card" :class="{'center':!isLogin}">
                <div class="user-logo">
                    <img v-if="!head_img" src="../assets/icon-un-login.png" alt="">
                    <img v-else :src="head_img" alt="">
                </div>
                <template v-if="isLogin">
                    <div class="user-info">
                        <p class="uname">{{ member_info.nickname }}</p>
                        <p class="ulevel" v-if="member_info.level_id>0">
                            <i class="uicon uicon-vip"></i><span>vip.{{ member_info.level_id }}</span>
                        </p>
                    </div>
                    <div class="user-total">
                        <a :href="$config.pages.my_profile"><b>{{total.comment}}</b>发表</a>
                        <a :href="$config.pages.follow+'?id='+member_info.id + '&type=1'"><b>{{total.focus}}</b>关注</a>
                        <a :href="$config.pages.follow+'?id='+member_info.id + '&type=2'"><b>{{total.fans}}</b>粉丝</a>
                        <a href="javascript:;" @click="admire_status = true"><b>{{total.admire}}</b>获赞</a>
                    </div>
                    <a class="user-edit" :href="this.$config.pages.personalData"><i class="uicon uicon-edit"></i></a>
                </template>
                <div class="user-btn" v-else>
                    <a class="login" :href="this.$config.pages.login">登录</a>
                    <a class="register" :href="this.$config.pages.register">注册</a>
                </div>
            </div>

            <a v-for="item in items" :key="item.url" :href="item.url" class="zsection" :class="item.class" v-if="item.isShow">
                <i class="uicon" :class="'uicon-'+item.class"></i>
                <p>
                    <span>{{item.name}}</span>
                    <i class="uicon uicon-uc-more"></i>
                </p>
            </a>
        </template>
        <ui-tab-bar :active="page.tabBarActive" @change="tabChange"></ui-tab-bar>
        
        
        <ui-popup :status="admire_status" @close="admire_status = false">
            <transition name="page-slide-bottom">
                <div class="popup-admire" v-if="admire_status">
                    <div class="main">
                        <img src="../assets/admire.gif">
                        <p>“{{member_info.nickname}}”共获{{member_info.admire_count}}赞</p>
                    </div>
                    <a href="javascript:;" @click="admire_status = false">确定</a>
                </div>
            </transition>
        </ui-popup>
    </div>
</template>

<script>
import scrollFixed from "../components/scrollFixed.vue";
import pageBar from "../components/pagebar.vue";
import mxTabBar from "../mixins/tabbar.js";
import UILoading from '../components/loading.vue';
import Popup from "../components/popup.vue";
export default {
    data() {
        return {
            page: {
                tabBarActive: 3,
                is_end: false,//是否已经没有数据
                loading: true,
            },
            pageError: '',
            initLoading: false,
            items: [],
            isLogin: false,
            isVip: false,
            member_info: "",
            head_img: "",
            total:{
                admire:'--',
                focus:'--',
                fans:'--',
                comment:'--',
            },
            admire_status:false
        };
    },
    components: {
        [scrollFixed.name]: scrollFixed,
        [pageBar.name]: pageBar,
        [Popup.name]: Popup,
        [UILoading.name]:UILoading,
    },
    mixins: [mxTabBar],

    mounted(){
        this.$on("RELOADDATA",type=> {
            this.page.loading = true;
            this.page.is_end = false;
            this.initPage();
        });
        this.$emit('RELOADDATA');
    },

    methods: {
        initPage () {
            this.$http.get('?ct=member_center&ac=index&cache='+Math.floor(Math.random()*10000)).then(res => {
                let data = res.data;
                if (data.code === 0) {
                    this.isLogin = true;
                    this.member_info = data.data;
                    this.head_img = this.member_info.head_img;
                    this.isVip = this.member_info.level_id >= 1 ? true : false;
                    this.total.comment = data.data.comment_count;
                    this.total.admire = data.data.admire_count;
                    this.total.fans = data.data.fans_count;
                    this.total.focus = data.data.focus_count;

                    localStorage.setItem('member_info', JSON.stringify(this.member_info));
                } else {
                    this.isLogin = false;
                    this.isVip = false;
                }
                this.$nextTick(() => {
                    this.items = [
                        {
                            url: this.$config.pages.filter,
                            name: "新闻过滤",
                            class: "filter",
                            isShow: this.isVip
                        },
                        {
                            url: this.$config.pages.message,
                            name: "消息",
                            class: "message",
                            isShow: true
                        },
                        {
                            url: this.$config.pages.history,
                            name: "历史/收藏",
                            class: "history",
                            isShow: true
                        },
                        {
                            url: this.$config.pages.feedback,
                            name: "反馈",
                            class: "feedback",
                            isShow: true,
                        },
                        {
                            url: this.$config.pages.setting,
                            name: "设置",
                            class: "set",
                            isShow: true
                        }
                    ];
                })
            }, (response) => {
                this.isLogin = false;
                this.isVip = false;
            }).finally(() => {
                this.$nextTick(()=>{
                    this.initLoading = false;
                    this.page.loading = false;
                })
            });
        },
    }
};
</script>

<style lang="less">
.my-center {
    
    .header-middle {
        font-size: 36px;
        color: #333;
    }

    .zsection {
        padding-left: 40px;
        background: #fff;
        &,
        p {
            display: flex;
            align-items: center;
        }
        p {
            line-height: 112px;
            height:112px;
            flex: 1;
            margin-left: 30px;
            padding-right:0.53rem;
        }
        span {
            margin-right: 30px;
            flex: 1;
            font-size: 32px;
            color: #282828;
        }
        & + .zsection {
            p {
                border-top: 1px solid #eee;
            }
        }
    }
    .message,.set{
        p {
            border-top:none !important;
        }
    }
    .section {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        padding: 0 50px;
        background: #fff;

        .icon {
            display: inline-block;
            position: relative;
            top: 2px;
            width: 32px;
            height: 32px;
            background-image: url("../assets/xinwenguolv.png");
            background-size: 100% 100%;
        }
        .item-name {
            margin-left: 28px;
            color: #282828;
            font-size: 32px;
        }
        .more {
            display: inline-block;
            width: 9px;
            height: 15px;
            background-image: url("../assets/icon-item-link.png");
            background-size: 100% 100%;
        }
    }

    .filter {
        margin: 20px 0;
    }
    .set {
        margin-top: 20px;
        p {
            border-bottom: none !important;
        }
    }

    .middle {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        padding: 0 0 0 50px;
        background: #fff;
        .item {
            width: 100%;
            display: flex;
            justify-content: flex-start;
            margin-bottom: 0;
            padding: 0 !important;
            div:first-child {
                align-self: center;
            }
            div:last-child {
                display: flex;
                justify-content: space-between;
                width: 100%;
                padding: 50px 0;
                margin-left: 30px;
                border-bottom: 1px solid #e2e2e2;
                .item-name {
                    margin: 0 !important;
                }
                .more {
                    margin-right: 50px;
                    align-self: center;
                }
            }
        }
        .no-border {
            border-bottom: 0 !important;
        }
        .message {
            .icon {
                background-image: url("../assets/xiaoxi.png");
            }
        }
        .history {
            .icon {
                background-image: url("../assets/history.png");
            }
        }
        .feedback {
            .icon {
                background-image: url("../assets/fankui.png");
            }
        }
    }

    .user-card {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        height:420px;
        background-color:#fff;
        margin-bottom: 20px;
        &.center {
            justify-content: center;
            .user-logo {
                margin-top:0;
            }
        }
        .user-logo {
            margin-top:62px;
            width:140px;
            height: 140px;
            border-radius: 50%;
            overflow: hidden;
            img {
                display: block;
                width:100%;
                height: auto;
            }
            
        }
        .uname {
            margin-top:24px;
            font-size:30px;
            font-weight: bold;
        }
        .ulevel {
            margin-top:20px;
            font-size:24px;
            color:#b08bf4;
        }
        .user-info {
            text-align: center;
        }
        .user-total {
            margin-bottom:10px;
            width:100%;
            &,a {
                display: flex;
                justify-content: center;
                align-items: center;
                height:88px;
            }
            a {
                flex-direction: column;
                position: relative;
                flex:1;
                font-size:20px;
                color:#919191;
                text-align: center;

                b {
                    color:#333;
                    font-size:30px;
                    font-weight: normal;
                    margin-bottom:18px;
                }
                & + a {
                     &::before {
                        content:'';
                        position:absolute;
                        left:0;
                        top:50%;
                        transform: translateY(-50%);
                        width:1px;
                        height:30px;
                        background-color:#eee;
                    }
                }
            }
        }
        .user-edit {
            position: absolute;
            top:0;
            right:0;
            display: flex;
            padding:30px;
        }

        .user-btn {
            margin-top:58px;
            &,a {
                height:54px;
                display: flex;
                justify-content: center;
                align-items: center;
            }

            a {
                position:relative;
                width:106px;
                font-size:28px;
                border-radius: 4px;
                border:3px solid #5a4640;

                & + a {
                    margin-left:30px;
                }
            }
            .login {
                color:#e64a19;
                border-color:#e64a19;
            }
        }
    }
}

.popup-admire {
    position: absolute;
    z-index:2;
    left:0;
    right:0;
    top:0;
    bottom:0;
    margin:auto;
    flex-direction: column;
    width:562px;
    height:398px;
    background-color:#fff;
    border-radius:8px;

    &,a,.main,.main p {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .main {
        position: relative;
        padding:0 30px;
        flex:1;
        flex-direction: column;
        justify-content: flex-end;
        p {
            height:180px;
            font-size:36px;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        img {
            position: absolute;
            left:0;
            right:0;
            top:-108px;
            width:285px;
            height:auto;
            margin:auto;
        }
    }
    .main,a {
        width:100%;
    }
    a {
        height:81px;
        font-size:30px;
        color:#666;
        border-top:1px solid #e2e2e2;
    }
}
</style>


